<template>
  <div class="scrollDiv">
    <div class="login-main">
      <headerBack></headerBack>
      <scroller>
        <div class="loginWrap">
          <h2 class="h2">手机快捷登录/注册</h2>
          <h5 class="h5">未注册用户可直接验证登录</h5>

          <div class="boxloginWrap">
            <div>
              <div class="login2">
                <xInput plvalue="请输入登录手机号" groupTitle="手机号" v-model="telNum" :showXx="showxx" v-on:clears="clear" type="txt"></xInput>
                <xInput plvalue="请输入验证码" v-model="yzmNum" :yzmtrue="showyzm" v-on:clears="clear" type="yzm" v-on:sends="sendYzm" groupTitle="验证码" :yzmMsg="yzmMsg"></xInput>
              </div>
              <div>
                <span class="login-desc">
                  <i>注册即代表你同意</i>
                  <b @click="commonJs.gopush('xieyi')">《用户注册协议》</b>
                  <i>和</i>
                  <b @click="commonJs.gopush('yinsi')">《隐私政策》</b>
                </span>
                <sumbit-btn :loading="loadings" message="登录" :isSumbit="showColor1" @btnClick="suresLogin('two')"></sumbit-btn>
                <span class="login-other" @click="goPwdLogin">
                  <i>账号密码登录</i>
                  <i class="right-img"></i>
                </span>
                <wx-login></wx-login>
              </div>
              <div style="height:2rem"></div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
    <!-- </scroller> -->
  </div>
</template>

<script>
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
import headerBack from '~/components/headerBack'
import xInput from '~/components/xInput'
import sumbitBtn from './components/sumbitBtn'
import wxLogin from './components/wxLogin'
import { identityLogin, sendMessageCode, getUserInfoById } from '~/api/identity'
import ls from 'store2'
import { setInterval, clearInterval } from 'timers'
import { authLogin } from '~/common/common'
export default {
  head: {},
  components: {
    xInput,
    sumbitBtn,
    wxLogin,
    headerBack,
  },
  data() {
    return {
      loadings: false,
      yzmMsg: '发送验证码',
      showyzm: false,
      verifyType: 2,
      telNum: '',
      yzmNum: '',
      showxx: false,
      showColor1: false,
      timer: null,
      nNum: 60,
      gourl: '',
      loginType: '',
    }
  },
  watch: {
    //telNum验证码手机号 yzmNum 验证码
    telNum(e) {
      const reg = /^1[3456789]\d{9}$/
      if (reg.test(e)) {
        this.showyzm = true
        if (this.yzmNum.length > 3) {
          this.showColor1 = true
        } else {
          this.showColor1 = false
        }
      } else {
        this.showyzm = false
        this.showColor1 = false
      }
    },
    yzmNum(e) {
      const reg = /^1[3456789]\d{9}$/
      if (e.length > 3 && reg.test(this.telNum)) {
        this.showColor1 = true
      } else {
        this.showColor1 = false
      }
    },
  },
  mounted() {
    this.$visit(this.$route.path)
    this.gourl = this.$route.query.returnMall
  },
  methods: {
    goPwdLogin() {
      if (this.$route.query.returnMall) {
        this.mallGoLogin('pwdLogin', this.$route.query.returnMall)
      } else {
        this.commonJs.gosto('pwdLogin')
      }
    },
    mallGoLogin(routerName, queryData) {
      this.$router.replace({
        path: routerName,
        query: {
          returnMall: queryData,
        },
      })
    },
    sendYzm() {
      if (this.nNum < 60) {
        this.$vux.toast.text('请稍后发送')
        return false
      }
      if (this.showyzm == false) {
        this.$vux.toast.text('请输入正确11位手机号码')
        return false
      }

      this.senyam()
      sendMessageCode({
        codeType: 1,
        mobile: this.telNum,
      })
        .then((res) => {
          this.$vux.toast.text(res.message)
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    senyam() {
      this.showyzm = false

      this.timer = setInterval(() => {
        this.nNum -= 1
        this.yzmMsg = this.nNum + '秒'
        if (this.nNum <= 0) {
          clearInterval(this.timer)
          // yzm.className += ' send';
          this.yzmMsg = '发送验证码'
          this.showyzm = true
          this.nNum = 60
        }
      }, 1000)
    },

    clear() {
      this.vals1 = ''
    },
    suresLogin(type) {
      if (this.showColor1 === true) {
        this.loadings = true
        this.timss = new Date().getTime()
        let loginObj = {
          account: this.telNum,
          credentials: this.yzmNum,
          loginTime: this.timss,
          verifyType: 2,
        }
        this.authLogin(loginObj, this.gourl)

        // if(!ls.get('tokensyxk')) return false;
      } else {
        this.$vux.toast.text('请正确填写登录信息')
      }
    },
    authLogin(obj, uri) {
      //  this.$loading('open');
      identityLogin(obj)
        .then((res) => {
          if (res.code == '0') {
            let token = res.data.accessToken
            let userData = res.data
            let uidVoid = res.data.userVoId
            ls.set('userType', res.data.userType)
            ls.set('tokensyxk', token)
            ls.set('userVoId', uidVoid)
            ls.set('yxkData', userData)
            this.getToken(uri)
            this.$vux.toast.text(res.message)
          } else {
            this.$vux.toast.text(res.data.message)
          }
          // this.$hideLoading();
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
        .finally(() => {
          this.loadings = false
        })
    },
    getToken(uri) {
      if (uri) {
        uri = decodeURIComponent(uri)
        let urls = uri + 'sx_uid=' + ls.get('userVoId') + '&sx_token=' + ls.get('tokensyxk') + '&open_id=' + ls.get('wxopen_id')
        window.location.replace(urls)
      } else {
        let goRoute = JSON.parse(sessionStorage.getItem('goesRouter'))
        if (goRoute) {
          sessionStorage.clear()
          if (goRoute.category === 'user') {
            this.goRoutes('../user')
            // this.goRoutes(goRoute.paths)
          } else if (goRoute.category === 'home') {
            this.goRoutes('../home')
            // window.location.replace(goRoute.paths+"?sx_uid="+ls.get('userVoId') +"&sx_token="+ls.get("tokensyxk")+"&open_id="+ls.get("wxopen_id"))
          } else if (goRoute.category === 'vip') {
            this.goRoutes('../vipUserRoute/openVip?isJustIn=true')
          }
        } else {
          this.goRoutes('../user')
        }
      }
    },
    goRoutes(routerName) {
      this.$router.replace({
        path: '../' + routerName,
      })
    },
  },
}
</script>

<style scoped lang="less">
@errorColor: #ff210a;

.scrollDiv {
  width: 100%;
  height: 100vh;
  background: #fff;
  overflow: hidden;
}

.login-main {
  width: 100%;
  height: 100vh;
  background: #fff;
  .h2 {
    font-size: 0.4rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(29, 30, 34, 1);
    line-height: 0.4rem;
    text-align: center;
  }
  .h5 {
    font-size: 0.26rem;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 0.4rem;
    text-align: center;
    margin-top: 0.25rem;
  }
}
.loginWrap {
  width: 100%;
  height: auto;
  min-height: 100vh;
  background: #fff;
  padding: 0 0.6rem;
  margin-top: 1.3rem;
  overflow: hidden;

  .boxloginWrap {
    width: 100%;
    height: auto;
    margin: 0.87rem 0 0;
    box-sizing: border-box;

    .login2 {
      width: 100%;
      height: auto;
      box-sizing: border-box;
    }

    .forgetPwd {
      display: block;
      height: 0.3rem;
      line-height: 0.3rem;
      text-align: center;
      color: #999;
      font-size: 0.28rem;
      margin-top: 0.5rem;
    }

    .login2 {
      margin-bottom: 0.5rem;
    }
  }
}
.login-desc {
  display: block;
  margin: 0.3rem auto;
  text-align: center;
  width: 100%;
  i,
  b {
    font-size: 0.26rem;
    font-family: PingFangSC;
    font-weight: 400;

    line-height: 0.4rem;
  }
  i {
    color: rgba(153, 153, 153, 1);
  }
  b {
    color: @assistColor;
  }
}
.login-other {
  display: block;
  margin: 0.3rem auto;
  text-align: center;
  width: 100%;
  i {
    font-size: 0.26rem;
    font-family: PingFangSC;
    font-weight: 400;
    vertical-align: middle;
    line-height: 0.4rem;
    color: rgba(153, 153, 153, 1);
  }
  .right-img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.1rem;
    width: 0.4rem;
    height: 0.4rem;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -1.3rem;
    background-size: 3rem 2.4rem;
  }
}
</style>
